<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>字符串的查找和替换</title>
<!--autor: carriehuang | QQ:453555909 | 转载需注明原处-->
<head>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width:500px;
            height:500px;
            margin: 0 auto;
            font-size: 14px;
            position: relative;
        }
        .wrap p{
            width:400px;
            height:350px;
            border: 10px solid #f5f5f5;
        }
        .open{
            position: absolute;
            right: -20px;
            top: 0;
            text-align: center;
            width: 100px;
            color:#fff;
            background-color: #ccc;
        }
        .open h2{
            height: 30px;
            line-height: 30px;
            font-size: 14px;
        }
        .open ul{
            display: none;
        }
        .open ul li{
            height: 30px;
            line-height: 30px;
            list-style: none;
            background-color: #f5f5f5;
            margin-top: 1px;
        }
        .open ul li a{
            text-decoration: none;
            color:#fff;
        }
        .open ul li:hover{
            background-color: #ccc;
        }
        .tip-pop{
            display: none;
            width: 380px;
            height:100px;
            position: absolute;
            left: 0;
            bottom: 0;
            background-color: #f5f5f5;
            border: 10px solid #c4c4c4;
            padding: 10px;
        }
        .tip-pop h3{
            height:30px;
            line-height:30px;
            border-bottom: 1px solid #6c6c6c;
            margin: 0 0 20px;
        }
        .tip-pop span{
            display: inline-block;
            color:#6c6c6c;
            font-size: 18px;
            float: right;
        }
        .pop-con{
            display: none;
        }
        .cur{ background-color: #f4c414}
    </style>
</head>
<body>
<div class="wrap" id="j_wrap1">
   <p id="j_txt">JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。</p>
    <div class="open" >
        <h2 id="j_open">展开</h2>
        <ul id="j_list">
            <li><a href="javascript:;"> 查找</a></li>
            <li><a href="javascript:;"> 替换</a></li>
        </ul>
    </div>

    <div class="tip-pop" id="j_pop">
        <h3>
            <em>查找</em>
            <span class="close" id="j_close" >x</span>
        </h3>
        <div class="pop-con">
            <input type="text" value="" name="text" />
            <input type="button" value="查找" name="find" />
        </div>
        <div class="pop-con">
            <input type="text" value="" name="text1" />
            <input type="text" value="" name="text2" />
            <input type="button" value="替换" name="repleace" />
        </div>
    </div>
</div>


<script type="text/javascript">

    window.onload=function(){
        var oWrap = document.getElementById("j_wrap1");
        var oTxt = document.getElementById("j_txt");
        var oOpen = document.getElementById("j_open");
        var oList = document.getElementById("j_list");
        var oPop = document.getElementById("j_pop");
        var oClose = document.getElementById("j_close");
        var aLi = oList.getElementsByTagName("li");
        var oCon = document.getElementsByClassName("pop-con");
        var aInput = oCon[0].getElementsByTagName("input");
        var aInput2 = oCon[1].getElementsByTagName("input");
        var onOff = true;
        var onFind = true;

        function show(obj,sw){
            sw?obj.style.display = "block": obj.style.display = "none";
            sw = !sw;
        }
        //展开事件
        oOpen.onclick =  function(){
            show(oList,onOff);
        };

        //查找弹窗
        aLi[0].onclick = function(){
            show(oPop,onFind);
            oCon[0].style.display = "block";
            oCon[1].style.display = "none";
        };
        //替换弹窗
        aLi[1].onclick = function(){
            show(oPop,onFind);
            var oH = oPop.getElementsByTagName("em");
                oH[0].innerHTML = "替换";
            oCon[0].style.display = "none";
            oCon[1].style.display = "block";
        };
        //关闭弹窗
        oClose.onclick = function(){
            oPop.style.display = "none";
        };
        var aTxt="";
        //查找关键字
        aInput[1].onclick = function(){
            aTxt =  oTxt.innerHTML.split(aInput[0].value);
            oTxt.innerHTML = aTxt.join('<span class="cur">'+aInput[0].value+'</span>');
        };
        //替换关键字
        aInput2[2].onclick = function(){
            //alert(1);
            aTxt =  oTxt.innerHTML.split(aInput2[0].value);
            oTxt.innerHTML = aTxt.join(aInput2[1].value);

        };
    }
</script>
</body>

</html>
